<template>
  <div class="app-container">
    <el-button type="primary" size="mini" style="margin:10px;" @click="initDB"
      >加载数据</el-button
    >

    <el-button
      type="primary"
      size="mini"
      style="margin:10px;"
      @click="setall();"
      >批量设置</el-button
    >

    <table border="1px">
      <tr>
        <td width="100px" v-for="(cel, index) in PS" :key="'ctd' + index">
          <el-select size="mini" v-model="cel.value" :placeholder="cel.name">
            <el-option
              v-for="(item, index3) in ['全部', ...cel.data]"
              :key="'item' + index3"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </td>
        <td width="100px">
          <input
            type="text"
            v-model="danjia"
            placeholder="单价"
            style="width:100%;height:28px;border:0px;"
          />
        </td>
        <td width="100px">
          <input
            type="text"
            v-model="shuliang"
            placeholder="数量"
            style="width:100%;height:28px;border:0px;"
          />
        </td>
      </tr>
    </table>

    <div
      ref="rightContent"
      @mousewheel="scrool"
      :style="
        'width:' +
          (PS.length * 100 + 220) +
          'px;height:' +
          (rowheight * showrowcount + 26) +
          'px;overflow-y:auto;overflow-x:hidden;border:1px solid #ccc'
      "
    >
      <div
        :style="
          'width:' +
            (PS.length * 100 + 220) +
            'px;height:' +
            (rows.length * rowheight + 2) +
            'px;'
        "
      >
        <table
          border="1px"
          :style="'position:relative;left:0px;top:' + relative + 'px'"
        >
          <tr v-for="(row, index) in rowsTemp" :key="'rtr' + index">
            <td
              width="100px"
              :height="rowheight"
              v-for="(cel, index2) in getnodes(row)"
              :key="'ctd-' + index + index2"
              valign="top"
              :rowspan="cel.rowspan"
            >
              <el-input
                size="mini"
                v-if="cel.leixing"
                v-model="cel.value"
                :placeholder="cel.name"
                @input="setvalue(cel);"
                style="width:100%;height:28px"
              ></el-input>
              <div
                v-if="!cel.leixing"
                :style="{
                  position: cel.rowspan > 1 ? 'sticky' : 'static',
                  top: 0
                }"
              >
                {{ cel.name }}
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selltable",
  components: {},
  data() {
    return {
      rows: [],
      cels: [],
      danjia: "",
      rowheight: 30,
      showrowcount: 20,
      rowsTemp: [],
      shuliang: "",
      relative: 0,
      PS: [
        { value: "", name: "厚度", data: ["1-5丝", "5-10丝"] },
        {
          value: "",
          name: "书籍高度",
          data: [
            "0-210mm",
            "0-211mm",
            "0-212mm",
            "0-213mm",
            "0-214mm",
            "0-215mm",
            "0-216mm",
            "0-217mm",
            "0-218mm"
          ]
        },
        {
          value: "",
          name: "P数",
          data: [
            "4",
            "8",
            "12",
            "16",
            "30",
            "31",
            "32",
            "33",
            "34",
            "35",
            "36",
            "37"
          ]
        },
        { value: "", name: "型号1", data: ["大", "中", "小", "小1"] },
        { value: "", name: "型号2", data: ["大", "中", "小", "小1"] },
        { value: "", name: "型号4", data: ["大", "中", "小", "小1"] }
      ],
      TEMPDATA: {}
    };
  },
  mounted() {
    console.log("AAAAAA");
    this.$refs.rightContent.addEventListener("scroll", this.scrool);
  },
  methods: {
    scrool() {
      let scrollTop = this.$refs.rightContent.scrollTop;

      //定位数据区域
      var count = Math.floor(scrollTop / this.rowheight);

      console.time("计时器");
      this.rowsTemp = [];
      //加载数据
      for (
        let i = count;
        i < count + this.showrowcount && i < this.rows.length;
        i++
      ) {
        this.rowsTemp.push(this.rows[i]);
      }
      console.timeEnd("计时器");
      //相对附
      this.relative = scrollTop;

      //循环列
      for (let _i = 0; _i < this.cels.length; _i++) {
        let colValue = { key: "" };
        for (let j = 0; j < this.rowsTemp.length; j++) {
          //   console.log("this.rows[j][_i]", this.rows[j][_i], j, _i);
          if (this.rowsTemp[j][_i].key == colValue.key) {
            //设置成合并显示
            this.rowsTemp[j][_i].rowspan = -1;
            colValue.rowspan++;
          } else {
            colValue = this.rowsTemp[j][_i];
            this.rowsTemp[j][_i].rowspan = 1;
          }
        }
      }
    },
    setvalue(cel) {
      //根据前面的型号组合出来字符串
      this.TEMPDATA[cel.key] = cel.value;

      //console.log(this.TEMPDATA);
    },
    setall() {
      //批量设置里面的数据

      let _cols = [];
      //压入队列 做排列组合
      this.PS.map(p => {
        if (p.value == "全部") _cols.push(p.data);
        else _cols.push([p.value]); //只插入选择的
      });

      //递归生成想要的数据
      let fun = (_datas, _cells, _i, danjia, shuliang) => {
        let current = _datas[_i];
        current.map(_ => {
          let str = JSON.stringify(_cells);
          //完全复制，否者引用对象后面有影响
          let _n = JSON.parse(str);
          let node =
            _cells.length > 0 ? _cells[_cells.length - 1] + "," + _ : _;
          _n.push(node);
          if (_i < _datas.length - 1) fun(_datas, _n, _i + 1, danjia, shuliang);
          else {
            this.TEMPDATA[node + ",单价"] = danjia;
            this.TEMPDATA[node + ",数量"] = shuliang;
          }
        });
      };

      //组装数据
      fun(_cols, [], 0, this.danjia, this.shuliang);

      this.danjia = "";
      this.shuliang = "";

      //重新加载数据
      this.initDB();
    },
    getnodes(row) {
      return row.filter(o => o.rowspan != -1);
    },
    initDB() {
      //清空
      this.rows.length = 0;
      this.cels.length = 0;

      let _tempdata = {};

      let datas = [];

      this.PS.map(p => {
        this.cels.push(p.name);
        datas.push(p.data);
      });

      //递归得到下面数据的合计
      let getcount = (_datas, _i) => {
        let count = 1;
        for (let j = _i; j < _datas.length; j++) count *= _datas[j].length;

        return count;
      };

      //递归生成想要的数据
      let fun = (_datas, _rows, _cells, _i) => {
        let current = _datas[_i];

        //循环当前层数据
        let index = 0;

        current.map(_ => {
          //完全复制，否者引用对象后面有影响
          let str = JSON.stringify(_cells);
          let _n = JSON.parse(str);
          let node = {
            //名称
            name: _,
            //当前的key
            key:
              _cells.length > 0 ? _cells[_cells.length - 1].key + "," + _ : _,
            //rowspan的合并行数
            //count: 0, //getcount(_datas, _i + 1),
            //索引
            //index: index++,
            rowspan: 1
          };
          _n.push(node);
          if (_i < _datas.length - 1) fun(_datas, _rows, _n, _i + 1);
          else {
            //最终插入到该行数据里面

            //如果原来有这个数据的单价和数量，应该还原？

            // node.danjia = 0;
            // node.shuliang = 0;

            //插入单价和数量

            //从DATA里面查找是否具备该数据，重新赋值
            let danjia = "";
            let shuliang = "";
            // console.log(this.TEMPDATA, node.key + ",单价");
            if (this.TEMPDATA[node.key + ",单价"]) {
              //   console.log(
              //     "AAAAA",
              //     node.key + ",单价",
              //     this.TEMPDATA[node.key + ",单价"]
              //   );
              danjia = this.TEMPDATA[node.key + ",单价"];
            }
            if (this.TEMPDATA[node.key + ",数量"])
              shuliang = this.TEMPDATA[node.key + ",数量"];

            _n.push({
              ...node,
              value: danjia,
              leixing: "danjia",
              name: "单价",
              key: node.key + ",单价"
            });
            _n.push({
              ...node,
              value: shuliang,
              leixing: "shuliang",
              name: "数量",
              key: node.key + ",数量"
            });

            _tempdata[node.key + ",单价"] = danjia;
            _tempdata[node.key + ",数量"] = shuliang;

            _rows.push(_n);
          }
        });
      };

      //组装数据
      fun(datas, this.rows, [], 0);

      //设置新的数据
      this.TEMPDATA = _tempdata;

      //console.log(this.rows);

      //循环列
      //   for (let _i = 0; _i < this.cels.length; _i++) {
      //     let colValue = "";
      //     for (let j = 0; j < this.rows.length; j++) {
      //       //   console.log("this.rows[j][_i]", this.rows[j][_i], j, _i);
      //       if (this.rows[j][_i].key == colValue) {
      //         //设置成合并显示
      //         this.rows[j][_i].rowspan = -1;
      //       } else {
      //         colValue = this.rows[j][_i].key;
      //         this.rows[j][_i].rowspan = this.rows[j][_i].count;
      //       }
      //     }
      //   }

      this.scrool();
    }
  },
  created() {
    //需要监听变化
    //this.initDB();
  }
};
</script>

<style lang="less" scoped>
.controls {
  display: inline-block;
}
table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}
table {
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
}
</style>
